import React, {Component} from 'react';
import {ActivityIndicator, FlatList, StyleSheet, Text, View} from 'react-native';
import VideoPlayer from 'react-native-video-player';
//师大影像子类
let pageNo = 1;//当前第几页
export default class DocumentaryVideo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      refreshing: false,
      paused:false
    };
  }
  render() {
    if (!this.state.data) {
      return (<View style={styles.container}>
        <ActivityIndicator
          animating={true}
          color='red'
          size="large"
        />
      </View>);
    }
    return (
      <FlatList
        data={this.state.data}
        onEndReached={this._onEndReached.bind(this)}
        renderItem={({ item }) => {
          return <View>
            <Text numberOfLines={2} style={styles.item_text}>{item.title}</Text>
            <View style={styles.transverse}>
              <VideoPlayer
                    endWithThumbnail
                    thumbnail={{ uri: item.cover }}
                    video={{ uri: item.source }}
                    autoplay = {false}
                    loop={false}
                    resizeMode ='cover'
                    pauseOnPress = {false}
                    ref={r => this.player = r}
                    style ={styles.backgroundVideo}
                  />
            </View>
            <View style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              backgroundColor:'#fff',
              padding: 10
            }}>
            <Text style={{ color: '#939393', fontSize: 12 }}>{item.publish_time}</Text>
            <Text style={{ color: '#939393', fontSize: 12, marginLeft: 5 }}>播放：{item.view_count}次</Text>
            </View>
          </View>
        }
        }
        ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#EEE' }} />}
        onEndReachedThreshold={0.1}
        onRefresh={this._renderRefresh.bind(this)}
        refreshing={this.state.refreshing}
      />
    );
  }
  //请求数据
  getDataFromApiAsync(page) {
    var body = new FormData();
    body.append("page", page);
    body.append("type", "3");
    fetch('http://eai.datamorality.com/snnuapp/api/media/list', {
      method: 'POST',
      body: body
    })
      .then((response) => response.json())
      .then((responseJson) => {
        if (page == 1) {
          this.setState({
            data: responseJson.d.lists,
          });
        } else {
          this.setState({
            data: this.state.data.concat(responseJson.d.lists),
          });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }
  componentDidMount() {
    this.getDataFromApiAsync(pageNo);
  }
  //上拉刷新
  _onEndReached() {
    pageNo++;
    //获取数据
    this.getDataFromApiAsync(pageNo);
  }
  //下拉刷新
  _renderRefresh() {
    pageNo = 1;
    //获取数据
    this.getDataFromApiAsync(pageNo);
  }

}

const styles = StyleSheet.create({
  item_text: {
    flex: 1,
    fontSize: 16,
    color: '#000000',
    padding: 10,
    marginTop: 5
  },
  transverse: {
    paddingLeft:10,
    paddingRight:10,
    height:200
  },
  image_style: {
    flex: 1,
    height: 100,
    marginLeft: 10
  },
  instructions: {
    textAlign: 'center',
    color: '#FF0000',
    marginBottom: 5,
  },
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
